import { Link, Outlet, history } from "umi";
import { Button, ConfigProvider, theme, Segmented, Space, Divider } from "antd";
import styles from "./index.less";
import React, { useState, useEffect } from "react";
import { AppstoreOutlined, BarsOutlined } from "@ant-design/icons";
import IconFont from "@/components/IconFont";
import Switches from "@/components/Switches";
import zhCN from "antd/locale/zh_CN";
import "dayjs/locale/zh-cn";
import dayjs from "dayjs";
dayjs.locale("zh-cn");

export default function Layout() {
  const [mode, setmode] = useState("light");

  return (
    <ConfigProvider
      theme={{
        algorithm: mode === "light" ? theme.algorithm : theme.darkAlgorithm,
        token: {
          colorPrimary: "#59c4f2",
          colorBorder: mode === "light" ? "#f0f0f0" : "transparent",
          colorBgSecondary: mode === "light" ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.4)",
        },
      }}
      locale={zhCN}
    >
      <div
        style={{ backgroundColor: mode === "light" ? "#fff" : "#363636",height:"100%" }}
      >
        <div className="drag"></div>
        <Space
          align="center"
          direction="horizontal"
          split={<Divider type="vertical" />}
          style={{
            justifyContent: "space-bewteen",
            position: "fixed",
            zIndex: 121,
            right: 24,
            top: 28,
          }}
        >
          <Switches
            value={mode}
            onChange={(val) => {
              setmode(val);
            }}
          ></Switches>
        </Space>
        <Outlet context={{ mode }} />
      </div>
    </ConfigProvider>
  );
}
